/*
 * MIT License
 *
 * Copyright (c) 2024 tuxming@sina.com / wechat: angft1
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */


import {useState} from 'react'
import {Typography, Image, Button, Row, Col, Slider } from "antd";
import { WallpaperModal} from './index';
import { themeConfigSlice } from '../../../redux/CommonSlice';
import { AdminSkinSetting } from '../../../common/I18NNamespace';
import { useTranslation, useSelector, useDispatch } from '../../../hooks';

//壁纸设置
export const BackgroundSettingComponent : React.FC = () => {

    const { t } = useTranslation(AdminSkinSetting);
    const imgUrl = useSelector(state => state.themeConfig.wallpaperUrl);
    const [open, setOpen] = useState(false);

    //背景透明都
    const bgOpacity = useSelector(state => state.themeConfig.bgOpacity);
    //容器背景透明度
    const containerBgOpacity = useSelector(state => state.themeConfig.containerOpacity);
    //侧边菜单项透明度
    const sideItemOpacity = useSelector(state => state.themeConfig.sideItemOpacity);
    //侧边栏选中的透明
    const sideItemSelectOpacity = useSelector(state => state.themeConfig.sideItemSelectOpacity);
    //背景模糊度
    const bgBlur = useSelector(state => state.themeConfig.bgBlur);

    const dispatch = useDispatch();

    const changeBgOpacityRadius = (value) => {
        dispatch(themeConfigSlice.actions.changeBgOpacity(value));
    }

    const changeContainerBgOpacity = (value) => {
        dispatch(themeConfigSlice.actions.changeContainerOpacity(value));
    }

    const changeSideItemOpacity = (value) => {
        dispatch(themeConfigSlice.actions.changeSideItemOpacity(value));
    }
    
    const changeSideItemSelectOpacity = (value) => {
        dispatch(themeConfigSlice.actions.changeSideItemSelectOpacity(value));
    }

    const changeBgBlur = (value) => {
        dispatch(themeConfigSlice.actions.changeBgBlur(value));
    }

    return <>
        <Typography.Title level={5}>壁纸</Typography.Title>
        <div style={{marginTop: 25, position: 'relative'} }>
            <Image preview={false} onClick={() => setOpen(true)}
                width="100%"
                src={imgUrl}
                fallback=""
            />
            <Button onClick={() => {setOpen(true)}} 
                style={{
                    position: 'absolute',
                    bottom: 30,
                    zIndex: 10,
                    left: 70
                }}
            >更换壁纸</Button>
        </div>
        <Typography.Text strong style={{marginTop: 25, display: 'block'} }>{t('背景透明度')}</Typography.Text>
        <Row align='middle'>
            <Col span={20}>
                <Slider
                    min={0}
                    step={0.1}
                    max={1}
                    onChange={changeBgOpacityRadius}
                    value={bgOpacity}
                />
            </Col>
            <Col span={4}>
                <Typography.Text>{bgOpacity}</Typography.Text>
            </Col>
        </Row>
        <Typography.Text strong style={{marginTop: 20, display: 'block'} }>{t('容器背景透明度')}</Typography.Text>
        <Row align='middle'>
            <Col span={20}>
                <Slider
                    min={0}
                    step={0.1}
                    max={1}
                    onChange={changeContainerBgOpacity}
                    value={containerBgOpacity}
                />
            </Col>
            <Col span={4}>
                <Typography.Text>{containerBgOpacity}</Typography.Text>
            </Col>
        </Row>
        <Typography.Text strong style={{marginTop: 20, display: 'block'} }>{t('侧边菜单项透明度')}</Typography.Text>
        <Row align='middle'>
            <Col span={20}>
                <Slider
                    min={0}
                    step={0.1}
                    max={1}
                    onChange={changeSideItemOpacity}
                    value={sideItemOpacity}
                />
            </Col>
            <Col span={4}>
                <Typography.Text>{sideItemOpacity}</Typography.Text>
            </Col>
        </Row>
        <Typography.Text strong style={{marginTop: 20, display: 'block'} }>{t('侧边菜单选中项透明度')}</Typography.Text>
        <Row align='middle'>
            <Col span={20}>
                <Slider
                    min={0}
                    step={0.1}
                    max={1}
                    onChange={changeSideItemSelectOpacity}
                    value={sideItemSelectOpacity}
                />
            </Col>
            <Col span={4}>
                <Typography.Text>{sideItemSelectOpacity}</Typography.Text>
            </Col>
        </Row>
        <Typography.Text strong style={{marginTop: 20, display: 'block'} }>{t('背景模糊度')}</Typography.Text>
        <Row align='middle'>
            <Col span={20}>
                <Slider
                    min={0}
                    step={1}
                    max={100}
                    onChange={changeBgBlur}
                    value={bgBlur}
                />
            </Col>
            <Col span={4}>
                <Typography.Text>{bgBlur}</Typography.Text>
            </Col>
        </Row>
        <WallpaperModal open={open} close={() => setOpen(false)}/>
    </>
}